<template>
	<navbar title="视频" :isBack="true"></navbar>
	<picture v-if="!info.is_show" title="开发中~" imgPath="/static/image/quesheng.png"
		imgHeight="192rpx" imgWidth="335rpx" bg="#F4F4F8" :height="tools.clientTopHight(250)"></picture>
	<view class="page" v-else :style="{ minHeight: tools.clientTopHight() }">
		<video class="video" object-fit="fill" :src="info.videoList" autoplay controls></video>
		<view class="body">
			<view class="title">{{info.title}}</view>
			<view class="line"></view>
			<view style="padding-top: 30rpx;">
				<view class="tuijian">推荐视频</view>
				<view class="video_s"  v-for="(item, index) in info.videoRedL" :key="index" @click="toVideo(item)">
					<image :src="item.banner" mode="aspectFill"></image>
					<view class="video_sT">{{item.title}}</view>
					<image src="../../static/icon/statr.png" class="video_s_image"></image>
				</view>
				<view v-if="!info.videoRedL.length" style="text-align: center;">
					暂无推荐视频
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	import tools from '@/utils/tools'
	import { videoInfo } from '@/service/api/index'
	let info = reactive({
		videoList: '',
		video_id: '',
		title:'',
		videoRedL:[],
		is_show:0
	})

	// 新闻资讯列表
	const getvideoInfo = async () => {
		const { msg } = await videoInfo({ id: info.video_id })
		info.videoList = msg.video
		info.videoRedL=msg.list
		info.title=msg.title
		info.is_show = msg.is_show;	
		uni.hideLoading()
	}
	// 点击 nav
	const toVideo = (item:any) => {
		console.log(item.video);
		info.videoList = item.video;
	}

	onLoad(e => {
		console.log(e);
		info.video_id = e.id
		uni.showLoading({
			title: "数据加载中"
		})
		getvideoInfo()
	})
</script>

<style lang="scss" scoped>
	.page{
		background-color: #FFFFFF;
		padding: 20rpx;
	}
	.video {
		width: 100%;
		height: 422upx;
		border-radius: 20rpx;
	}
	.body{
		
		
	}
	.line{
		width: 750rpx;
		height: 20rpx;
		background: #F4F4F8;
		margin-left: -20rpx;
	}
	.title{
		height: 88rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		color: #000000;
		word-wrap:break-word;
		overflow:hidden; 
		text-overflow:ellipsis;
		display:-webkit-box; 
		-webkit-box-orient:vertical;
		-webkit-line-clamp:2; 
	}
	.tuijian{
		width: 136rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		color: #000000;
		opacity: 1;
	}
	.video_s {
		height: 140rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
		position: relative;
		.video_s_image{
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			left: 50rpx;
		}
		.video_sT {
			width: 508rpx;
			height: 90rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 50rpx;
			color: #000000;
			word-wrap:break-word;
			overflow:hidden; 
			text-overflow:ellipsis;
			display:-webkit-box; 
			-webkit-box-orient:vertical;
			-webkit-line-clamp:2; 
		}
	
		image {
			margin-right: 20rpx;
			width: 100rpx;
			height: 100rpx;
		}
	}
</style>